<template>
  <div style="width:100%;flex:1;">
    <list id="new" class="list" @loadmore="fetch" loadmoreoffset="15">
      <refresh class="refresh" @refresh="onrefresh" :display="refreshing ? 'show' : 'hide'">
        <text>refreshing...</text>
      </refresh>
      <cell class="cell" v-for="item in items" :key="item.id">
        <div class="newPanel">
          <wxc-cell class="topPart" @click="toDetail(item.projectId)" :has-arrow="true">
            <div slot="title">
              <text style="font-size:1.5em;font-weight:bold;">{{ item.projectName }}</text>
              <text style="font-size:0.7em;color:#ddd;margin-top:10px">{{ item.created }}</text>
            </div>
          </wxc-cell>
          <wxc-cell class="part" :label="item.name">
            <div slot="title" style="display:flex;flex-direction:row">
              <text style="padding:5px" class="status" :class="item.status | nodeClass">{{item.status | nodeStatus}}</text>
              <text style="flex:1;font-size:0.8em;text-align:center;color:#ddd;">{{ item.updated }}</text>
            </div>
          </wxc-cell>
        </div>
      </cell>
    </list>
    <wxc-loading :show="refreshing"></wxc-loading>
  </div>
</template>
<script>
  import { Task } from '../http'
  import { WxcCell, WxcLoading } from 'weex-ui';
  const modal = weex.requireModule('modal')
  const LOADMORE_COUNT = 4
  export default {
    data () {
      return {
        items: [],
        refreshing: false
      }
    },
    filters: {
      nodeStatus (v) {
        switch (v) {
          case 1:return '签收';
          case 2:return '受理';
          case 3:return '不予受理';
          case 4:return '办结';
          case 0:return '待办理';
          case 9:return '不涉及';
        }
      },
      nodeClass (v) {
        switch (v) {
          case 1:return 'label-warning';
          case 2:return 'label-info';
          case 3:return 'label-danger';
          case 4:return 'label-success';
          case 0:return 'label-default';
          case 9:return 'label-uninvolved';
        }
      }
    },
    components: { WxcCell, WxcLoading },
    created () {
      this.onrefresh();
    },
    methods: {
      fetch (event) {
        modal.toast({ message: 'loadmore', duration: 1 })
        setTimeout(() => {
          const length = this.lists.length
          for (let i = length; i < length + LOADMORE_COUNT; ++i) {
            this.lists.push(i + 1)
          }
        }, 800)
      },
      sortKey (a, b, type) {
        var _a = new Date(a.updated).getTime();
        var _b = new Date(b.updated).getTime();
        return type ? (_a - _b > 0) : (_a - _b < 0)
      },
      onrefresh () {
        const vm = this;
        this.refreshing = true
        Promise.resolve(
          Task.getPro('year=' + new Date().getFullYear() + '&_sort_=updated desc&statusNotIn=0,9')
        ).then(response => {
            var box = response.data;
            if (box.length < 10) {
              Promise.all([
                Task.getPro('year=' + (new Date().getFullYear() - 1) + '&_sort_=updated desc&statusNotIn=0,9')
              ]).then(([response]) => {
                vm.$set(vm.$data, 'items', box.concat(response.data).sort((a, b) => (vm.sortKey(a, b, false))))
                vm.refreshing = false
              }).catch(error => {
                vm.refreshing = false
              })
            } else {
              vm.$set(vm.$data, 'items', response.data)
              vm.refreshing = false
            }
        })
      },
      toDetail (id) {
        this.$router.push('/detail/' + id)
      }
    },
    
  }
</script>
<style>
  .newPanel {
    width: 95%;
    padding: 10px 0;
    margin-top: 15px;
    margin-bottom: 15px;
    flex-direction: column;
    justify-content: center;
    border-width: 2px;
    border-style: solid;
    border-color:rgb(221, 221, 221);
    background-color:#fff;
  }
  .text {
    text-align: center;
    color: #41B883;
  }
  .cell {
    align-items:center;
  }
  #main .scroller_detail .detailTitle{
    background-color:rgb(255,201,0);
    padding: 8px 10px;
    color: #fff;
    font-size: 1.2em;
  }
  #main .scroller_detail .status{
    width:50px;
    border-radius:3px;
    color:#fff;
    padding:5px;
    font-size:12px;
  }
  .label-info {
    background-color: #5bc0de;
  }
  .label-danger {
    background-color: #d9534f;
  }
  .label-default {
    background-color: #777;
  }
  .label-uninvolved {
    background-color: #000;
  }
  .label-success {
    background-color: #5cb85c;
  }
  .label-warning{
    background-color: #f0ad4e;
  }
  .status{
    border-radius:3px;
    color:#fff;
    padding:5px;
    font-size:12px;
  }
</style>